<template>
  <div class="cake-container">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><span class="breadcrumb-item">蛋糕管理</span></el-breadcrumb-item>
        <el-breadcrumb-item><span class="breadcrumb-item">蛋糕信息</span></el-breadcrumb-item>

      </el-breadcrumb>
    </el-row>
    <el-row>
      <el-form label-width="80px" >

        <el-row>
          <el-col span="8">
            <el-form-item label="蛋糕名称">
              <el-input/>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="蛋糕规格">
              <el-select></el-select>
            </el-form-item>
          </el-col>

          <el-col span="8">
            <el-form-item label="蛋糕口味">
              <el-select></el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col span="8">
            <el-form-item label="蛋糕价格">
              <el-input/>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="----">
              <el-input/>
            </el-form-item>
          </el-col>

          <el-col span="6" offset="2">
            <el-button type="success">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>


    </el-row>
    <el-row>
      <el-table :data="cakes" border>
        <el-table-column prop="cakeName" label="蛋糕名称" width="180"/>
        <el-table-column prop="cakeName" label="蛋糕尺寸" width="180"/>
        <el-table-column prop="cakeName" label="主要材料" width="180"/>
        <el-table-column prop="cakeName" label="价格" width="180"/>
      </el-table>

    </el-row>

   <el-dialog :visible.sync="info.show">
           <el-upload class="upload-demo" 
           :on-preview="preview"
           :on-success="success"
           action="http://localhost:3000/cake/upload"
           :limit="1"
           :auto-upload="true"
           :show-file-list="true" 
            :file-list="fileList" list-type="picture">
               <el-button size="small" type="primary">上传文件</el-button>
           </el-upload>
   </el-dialog>
   
  </div>
</template>

<script>
export default {
  name: "Basic",
  data: function() {
    return {
      cakes: [],
      info: {
        show: true,
        fileList: [
          {
            name: "food.jpeg",
            url:
              "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          },
          {
            name: "food2.jpeg",
            url:
              "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          }
        ]
      }
  }},
      methods: {
        success(res,file,fileList) {
          console.log(res.filename);
        }
      
      }
    };
</script>

<style scoped>
.breadcrumb-item {
  font-weight: bolder !important;
  color: rgba(67, 64, 74, 0.7);
}

.el-form {
  margin-top: 20px;
}

.cake-container {
  padding-right: 20px;
}
</style>
